<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习笔记</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="root">
        <!--点击事件设置使用@click，event不是第一个参数的话，使用$event占位-->
        <!--点击事件click内置又很多属性，其中prevent,once,stop用的最多，prevent最多
        阻止默认行为
        -->
        <button @click="showInfo(10,$event)">点我触发事件</button>
        <!--键盘监听事件 keyup.enter用的多-->
        <input type="text" placeholder="请输入年龄" @keyup.enter="showage" v-model="age">
        <br>
        <input type="text" placeholder="请输入姓氏" v-model="firstName">
        <br>
        <input type="text" placeholder="请输入名字" v-model="lastName">
        <br>
        <!--测试computed属性-->
        <span>我的全名是{{fullName}}</span>
        <br>
        <span>我的出生年份是{{birthYear}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '.root',
            //组件化开发，data就是一个函数
            data() {
                return {
                    name: 'chy',
                    age: 18,
                    firstName: 'chen',
                    lastName: 'hongyuan',
                    year: 2024,
                }
            },
            methods: {
                //点击事件内部默认有一个event,如果多个参数，第一个默认是event
                //如果不希望第一个参数是event，但是又需要保存event参数
                //在调用处使用$event占位
                showInfo(a, event) {
                    console.log(a)
                    console.log(event)
                    console.log('发生了点击')
                },
                showage() {
                    //需要用this获取对象实例
                    console.log('打印年龄', this.age)
                }
            },
            //计算属性：通过一定的计算方式，生成对应的新属性
            //内部封装了get和set
            computed: {
                //注意，set中不能调用fullName，否则无限递归
                //set中计算的依据是根据get的依据
                fullName: {
                    get() {
                        //使用空格拼接
                        return this.firstName + ' ' + this.lastName
                    },
                    set(value) {
                        console.log('set')
                        const names = value.split(' ') //分割字符串
                        this.firstName = names[0]
                        this.lastName = names[1]
                    }
                },
                //如果只有get可以简写,直接将对应的属性名作为函数名即可
                birthYear() {
                    return this.year - this.age
                }
            },
            //watch属性，侦听属性用于监听已存在的属性
            watch:{
                //侦听属性内部接受一个回调函数，回调函数可以侦听新的值和旧的值
                fullName:{
                    handler(oldValue,newValue){
                        console.log('before is',oldValue)
                        console.log('now is',newValue)
                    }
                }
            }
            //watch属性可以简写，类似于对应的computed属性简写
            //deep参数设置为true可以深度侦听，侦听多层结构的属性
        })
        //修改
        //vm.fullName='liu daqing' //手动修改，set会被调用
        //动态添加样式 :class :style
    </script>
</body>
</html>